<template>
	<view class="user-page">
		<view class="header-bg-section">
			<image class="bg-blur" src="https://example.com/your-green-blur-bg.jpg" mode="aspectFill"></image>
			
			<view class="user-content">
				<view class="user-info-row">
					<view class="avatar-box">
						<image
							class="avatar"
							:src="isLogin ? userAvatar : '/static/defaultphoto.png'"
							mode="aspectFill">
						</image>
					</view>
					
					<view class="greeting-box">
						<text class="greeting-text">HI~ {{ username }}</text>
						
						<button
							class="login-btn-img"
							@click="goLogin"
							:class="{'logged-in-btn': isLogin}"
						>
							{{ isLogin ? '已登录' : '登录' }}
						</button>
					</view>
				</view>
				
				<view class="user-stats-bar">
					<view class="stat-item" @click="checkLoginAndGo('关注')">
						<text class="stat-number">3</text>
						<text class="stat-label">关注</text>
					</view>
					<view class="stat-divider"></view>
					<view class="stat-item" @click="checkLoginAndGo('话题')">
						<text class="stat-number">0</text>
						<text class="stat-label">话题</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="icons-section">
			<view class="icon-item" @click="checkLoginAndGo('收藏')">
				<text class="uni-icon icon-star"></text>
				<text class="icon-label">收藏</text>
			</view>
			<view class="icon-item" @click="checkLoginAndGo('历史')">
				<text class="uni-icon icon-history"></text>
				<text class="icon-label">历史</text>
			</view>
			<view class="icon-item" @click="checkLoginAndGo('设置')">
				<text class="uni-icon icon-setting"></text>
				<text class="icon-label">设置</text>
			</view>
		</view>
		
		<view class="ad-section">
			<text class="ad-text">瓜分30万现金红包</text>
			<text class="ad-link">速抢 >></text>
		</view>
		
		<view class="publish-section">
			<image class="publish-bg" src="/static/publish-bg.png" mode="widthFix"></image>
			<text class="publish-count">已有 385,893 人</text>
			<text class="publish-tip">在这里发布身边的新鲜事</text>
			
			<view class="publish-btns">
				<button class="publish-btn primary-btn">我也要发布</button>
				<button class="publish-btn secondary-btn">先去逛逛 ></button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isLogin: false,
			// 未登录时显示 '欢迎回来'
			username: "欢迎回来", 
			userAvatar: "/static/defaultphoto.png"
		}
	},
	onShow() {
		// Tab Bar 页面每次切换到前台都会执行，保证状态实时更新
		this.loadUser();
	},
	methods: {
		loadUser() {
			const acc = uni.getStorageSync("Account");
			
			// 检查是否登录：判断 acc 是对象且包含 nickname 属性
			if (acc && acc.nickname) {
				// 已登录状态
				this.username = acc.nickname;
				this.userAvatar = acc.avatar || '/static/defaultphoto.png';
				this.isLogin = true;
			} else {
				// 未登录状态
				this.username = "欢迎回来"; // 确保未登录时显示“欢迎回来”
				this.userAvatar = '/static/defaultphoto.png';
				this.isLogin = false;
			}
			uni.setTabBarItem({
					index: 3, // TabBar 我的在第四个位置（从0开始）
					text: this.isLogin ? '我的' : '未登录'
				});
		},
		goLogin() {
			if (!this.isLogin) {
				// 未登录时跳转到登录页
				uni.navigateTo({
					url: "/pages/login/login"
				});
			} else {
				// 已登录时，提供退出登录选项
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 退出登录：移除缓存，并重新加载状态
							uni.removeStorageSync('Account');
							this.loadUser(); 
							uni.showToast({ title: '已退出登录', icon: 'none' });
						}
					}
				});
			}
		},
		checkLoginAndGo(type) {
			if (!this.isLogin) {
				// 未登录时，提示用户必须登录才能进行操作
				uni.showToast({
					title: "请先登录才能查看" + type,
					icon: "none"
				});
				return;
			}
			uni.showToast({ title: '进入 ' + type, icon: 'none' });
		}
	}
}
</script>

<style>
.user-page {
	min-height: 100vh;
	background-color: #b9dec9;
	padding-bottom: 30rpx;
}

/* ================== 1. 顶部背景与用户信息区域 (绿色) ================== */
.header-bg-section {
	position: relative;
	height: 400rpx;
	overflow: hidden;
	margin-bottom: 20rpx;
	/* 如果背景图片加载失败，使用柔和深绿作为回退背景 */
	background-color: #357944;
}

.bg-blur {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	filter: blur(10px);
	transform: scale(1.1);
}

.user-content {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 10;
	padding: 40rpx;
	box-sizing: border-box;
	color: #fff;
}

.user-info-row {
	display: flex;
	align-items: center;
	margin-bottom: 40rpx;
}

.avatar-box {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	overflow: hidden;
	border: 4rpx solid #fff;
	margin-right: 30rpx;
}

.avatar {
	width: 100%;
	height: 100%;
}

.greeting-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.greeting-text {
	font-size: 32rpx;
	margin-bottom: 10rpx;
}

.login-btn-img {

	background-color: #3c9566;
	color: #fff;
	font-size: 24rpx;
	padding: 8rpx 30rpx;
	line-height: 1.5;
	border-radius: 40rpx;
	margin: 0;
	width: fit-content;
	transition: background-color 0.3s;
}


.logged-in-btn {
	background-color: rgba(255, 255, 255, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: #fff;
}


.user-stats-bar {
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 20rpx 0;
}

.stat-item {
	text-align: center;
	width: 45%;
}

.stat-divider {
	width: 2rpx;
	height: 60rpx;
	background-color: rgba(255, 255, 255, 0.5);
}

.stat-number {
	font-size: 36rpx;
	font-weight: bold;
	display: block;
}

.stat-label {
	font-size: 24rpx;
	opacity: 0.8;
}

/* ================== 2. 核心功能图标区域 ================== */
.icons-section {
	display: flex;
	justify-content: space-around;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx 0;
	margin: 0 30rpx 30rpx;
	box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
}

.icon-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}

.uni-icon {
	font-size: 50rpx;
	margin-bottom: 15rpx;
}


.icon-star::before { content: '★'; color: #f9d71c; }
.icon-history::before { content: '🕒'; color: #5A9977; }
.icon-setting::before { content: '⚙'; color: #5A9977; }

.icon-label {
	font-size: 24rpx;
	color: #333;
}

/* ================== 3. 广告位 (绿色横幅) ================== */
.ad-section {
	display: flex;
	justify-content: space-between;
	align-items: center;

	background-color: #357944;
	color: #fff;
	padding: 20rpx 40rpx;
	border-radius: 20rpx;
	margin: 0 30rpx 30rpx;
	box-shadow: 0 4rpx 10rpx rgba(64, 129, 106, 0.5);
}

.ad-text {
	font-size: 28rpx;
	font-weight: bold;
}

.ad-link {
	font-size: 24rpx;
	background-color: #fff;
	color: #40816A;
	padding: 6rpx 20rpx;
	border-radius: 30rpx;
}

.publish-section {
	position: relative;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 40rpx;
	margin: 0 30rpx;
	box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.publish-bg {
	width: 500rpx;
	height: 200rpx;
	margin-bottom: 30rpx;
}

.publish-count {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
}

.publish-tip {
	font-size: 26rpx;
	color: #6c757d;
	margin-bottom: 40rpx;
}

.publish-btns {
	display: flex;
	justify-content: center;
	width: 100%;
}

.publish-btn {
	font-size: 28rpx;
	padding: 15rpx 30rpx;
	border-radius: 50rpx;
	margin: 0 10rpx;
	line-height: 1;
}

.primary-btn {

	background-color: #5A9977;
	color: #fff;
	border: none;
}

.secondary-btn {
	background-color: #fff;
	color: #5A9977;
	border: 1px solid #5A9977;
}
</style>